import { useState } from "react";

import classs from './TodoList.module.scss'
const AddTodo = (props) => {
   const [title, setTitle] = useState('')
   const [level, setLevel] = useState('')
   const handleTitle = (e) => {
      let title = e.target.value
      setTitle(title)
    }
    const handleLevel = (e) => {
        let level = e.target.value
        setLevel(level)
      }
      // 添加一条todo
      const handleAdd = () => {
         const todo = { title, level}
         props.updateTodoList(todo)
         setTitle('')
         setLevel('')
      }
    return (<div className={classs.addtodo}>
    
        <div className={classs.item}>
            <input placeholder="请输入标题" value={title} onChange={handleTitle} />
        </div>
        <div className={classs.item}>
            <input value={level} type='number' onChange={handleLevel} onKeyDown={(e) => {
              if(e.key === 'Enter') {
                handleAdd()
              }
            }} />
        </div>
        <footer style={{textAlign:'right'}}>
           <button style={{backgroundColor:'#f60',marginRight: '20px'}} onClick={handleAdd}>添加</button>
        </footer>
    </div>);
}

export default AddTodo;